
/*
 * Search card and text input
 */
.themes-magic-search {
	margin-top: 24px;
}

.themes-magic-search-card {
	display: flex;
	align-items: center;
	background: white;
	box-shadow: 0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.5 ), 0 1px 2px var( --color-neutral-0 );
	transition: all 0.15s ease-in-out;

	&.has-highlight {
		box-shadow: 0 0 0 1px var( --color-primary ), 0 0 0 4px var( --color-primary-light );
	}

	.search {
		flex: 0 1 auto;
		margin: 0;
		height: 58px;

		&.has-focus, &.has-focus:hover {
			box-shadow: none;
		}
	}

	.section-nav {
		margin: 0;
	}

	.search .search-open__icon {
		color: var( --color-neutral-20 );
	}

	.themes-magic-search-card__icon {
		margin-left: 8px;
		display: flex;
		color: var( --color-primary );
		cursor: pointer;
		z-index: z-index( '.search', '.search .search__open-icon' );

		.accessible-focus &:focus {
			outline: dotted 1px var( --color-primary );
		}

		.themes-magic-search-card__icon-close {
			flex: 0 0 auto;
			color: var( --color-neutral-60 );
			align-items: center;
		}
	}

	.segmented-control {
		flex: 0 0 auto;
		min-width: 0;
		padding: 11px 14px;

		.segmented-control__item,
		.segmented-control__link,
		.segmented-control__text {
			min-width: inherit;
		}
	}

	.more {
		flex: 0 1 auto;
		padding: 8px 14px;
	}
}


/*
 * Tokens
 */
.themes-magic-search-card__token {
	/* These are required to make token alignment work */
	/* stylelint-disable-next-line */
	font: inherit;
	pointer-events: none;
	position: relative;

	/* These are styling */

	&::before {
		content: '';
		position: absolute;
		width: 100%;
		height: calc( 100% + -3px );
		z-index: -1;
	}

	.themes-magic-search-card__token-taxonomy {
		/* These are required to make token alignment work */
		pointer-events: none;
		display: inline-block;

		/* These are styling */
		border-bottom: 3px solid var( --color-accent );
		opacity: 0.6;
	}

	.themes-magic-search-card__token-separator {
		/* These are required to make token alignment work */
		pointer-events: none;
		display: inline-block;

		/* These are styling */
		border-bottom: 3px solid var( --color-accent );
		opacity: 0.6;
	}

	.themes-magic-search-card__token-filter {
		/* These are required to make token alignment work */
		pointer-events: none;
		display: inline-block;

		/* These are styling */
		border-bottom: 3px solid var( --color-accent );
	}
}

.themes-magic-search-card__search-text {
	/* These are required to make token alignment work */
	/* stylelint-disable-next-line */
	font: inherit;
	pointer-events: none;
	color: transparent;
}

.themes-magic-search-card__search-white-space {
	/* These are required to make token alignment work */
	/* stylelint-disable-next-line */
	font: inherit;
	pointer-events: none;
	white-space: pre;
}


/*
 * Suggestions: Welcome Card
 */
.themes-magic-search-card__welcome {
	color: var( --color-neutral-light );
	background-color: var( --color-surface );
	box-shadow: 0 0 0 1px rgba( var( --color-neutral-10-rgb ), 0.5 ), 0 1px 2px var( --color-neutral-0 );
	display: flex;
	flex-direction: column;
}

.themes-magic-search-card__welcome-header {
	background-color: var( --color-neutral-0 );
	border-bottom: 1px solid var( --color-neutral-5 );
	border-top: 0;
	padding: 4px 8px;
	font-size: $font-body-small;

	text-transform: uppercase;
	color: var( --color-neutral-70 );
}

.themes-magic-search-card__welcome-taxonomies {
	display: flex;
	flex-wrap: wrap;

	@include breakpoint-deprecated( '>660px' ) {
		flex-wrap: nowrap;
	}
}

.themes-magic-search-card__welcome-taxonomy {
	display: flex;
	flex-direction: column;
	text-align: center;
	flex: 1 0 auto;
	overflow: hidden;
	padding: 10px 6px;
	margin: 0;
	font-size: $font-body-small;
	line-height: 16px;
	cursor: pointer;
	color: var( --color-neutral-70 );
	transition: all 200ms ease-in;

	@include breakpoint-deprecated( '>660px' ) {
		width: auto;
	}

	.gridicon {
		fill: var( --color-neutral-70 );
		margin: 0 auto;
		transition: fill 200ms ease-in;
	}

	&.themes-magic-search-card__welcome-taxonomy-highlight,
	&:hover {
		color: var( --color-accent );

		.gridicon {
			fill: var( --color-accent );
		}

		@include breakpoint-deprecated( '>660px' ) {
			background: var( --color-neutral-0 );
			box-shadow: inset 0 -3px 0 0 var( --color-accent );
		}
	}
}

.themes-magic-search-card__welcome-taxonomy-icon {
	pointer-events: none;
}
